<template>
  <div style="padding: 10px;overflow-x: auto">
    <div style="text-align: center;margin-top: 20px">
      <el-form ref="searchForm" :model="searchForm" :rules="rules" size="mini" :inline="true">
        <el-form-item label="年:" prop="year">
          <el-date-picker
            v-model="searchForm.year"
            type="year"
            placeholder="选择年"
            :picker-options="pickerOptions"
            value-format="yyyy"
            format="yyyy年"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label=" 年度:" prop="type">
          <el-select v-model="searchForm.type" placeholder="请选择年度" clearable size="mini">
            <el-option :value="1" label="上半年"></el-option>
            <el-option :value="2" label="下半年"></el-option>
            <el-option :value="3" label="全年"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 10px" type="primary" size="mini" plain @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <table class="mailTable" v-loading="companyYearTableLoading">
      <tr class="header firstTr">
        <td colspan="15" class="firstTd">{{ companyYearData.type === 3 ? '全年' : '半年度' }}业绩冲刺目标（
          {{ companyYearData.sum }}万元）
        </td>
      </tr>
      <tr class="header_two">
        <td class="firstTd" style="width: 5%">{{ companyYearData.type === 3 ? '全年' : '半年度' }}目标/万元</td>
        <td style="width: 5%">{{ companyYearData.type === 3 ? '全年' : '半年度' }}累计完成金额/万元</td>
        <td style="width: 5%">{{ companyYearData.type === 3 ? '全年' : '半年度' }}累计完成率</td>
        <td style="width: 5%">月度目标/万元</td>
        <td style="width: 5%">月份</td>
        <td style="width: 10%">周期时间</td>
        <td style="width: 5%">本周目标/万元</td>
        <td style="width: 5%">本周成交金额/万元</td>
        <td style="width: 5%">本周完成率</td>
        <td style="width: 20%">成交客户组成及金额/万元</td>
        <td style="width: 5%">累计完成金额/万元</td>
        <td style="width: 5%">月度累计完成率</td>
        <td style="width: 5%" class="icon_td">
          目标分解
        </td>
        <td style="width: 5%">公司盘</td>
        <td style="width: 5%">个人盘</td>
      </tr>
      <template v-if="companyYearData.month_target_list && companyYearData.month_target_list.length">
        <template v-for="(month,index) in companyYearData.month_target_list">
          <template v-for="(week,i) in month.weekSummaryVOList">
            <tr>
              <td class="firstTd" :rowspan="companyYearData.type===3?96:48" v-if="index===0 && i===0">
                {{ companyYearData.sum }}
              </td>
              <td :rowspan="companyYearData.type===3?96:48" v-if="index===0 && i===0">
                {{ companyYearData.amount_completed }}
              </td>
              <td :rowspan="companyYearData.type===3?96:48" v-if="index===0 && i===0">
                {{ companyYearData.completion_rate }}%
              </td>
              <td v-if="i===0" rowspan="4">{{ month.target }}</td>
              <td v-if="i===0" rowspan="4">{{ month.month }}月</td>
              <td>
                <div>{{ week.begin_date }}</div>
                ~
                <div>{{ week.end_date }}</div>
              </td>
              <td>{{ week.target }}</td>
              <td>{{ week.completed_amount }}</td>
              <td>{{ week.completed_rate }}%</td>
              <td>
                <div v-if="week.weekTransactedCustomerVOList && week.weekTransactedCustomerVOList.length">
                  <span v-for="(customer,t) in week.weekTransactedCustomerVOList">
                    {{
                      customer.name + '(' + customer.target + ')' + (t === week.weekTransactedCustomerVOList.length - 1 ? '' : '、')
                    }}
                  </span>
                </div>
              </td>
              <td v-if="i===0" rowspan="4">{{ month.amount_completed }}</td>
              <td v-if="i===0" rowspan="4">{{ month.completion_rate }}%</td>
              <td>
                <span v-if="i === 0">目标/万元</span>
                <span v-if="i === 1">目标占比</span>
                <span v-if="i === 2">实际成交金额/万元</span>
                <span v-if="i === 3">成交占比/月</span>
              </td>
              <td>
                <span v-if="i === 0">{{ month.uphold_target }}</span>
                <span v-if="i === 1">{{ month.uphold_target_proportion }}%</span>
                <span v-if="i === 2">{{ month.uphold_completed }}</span>
                <span v-if="i === 3">{{ month.uphold_completed_proportion }}%</span>
              </td>
              <td>
                <span v-if="i === 0">{{ month.personal_target }}</span>
                <span v-if="i === 1">{{ month.personal_target_proportion }}%</span>
                <span v-if="i === 2">{{ month.personal_completed }}</span>
                <span v-if="i === 3">{{ month.personal_completed_proportion }}%</span>
              </td>
            </tr>
          </template>
        </template>
      </template>
      <tr v-else>
        <td class="firstTd" colspan="15">暂无数据</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { queryCompanyYearTargetSummary } from '@/api/workbench/compayYear'

export default {
  name: 'company_year_target',
  created() {
    const now = new Date()
    this.searchForm.year = now.getFullYear() + ''
    this.searchForm.type = ((now.getMonth() + 1) <= 6 ? 1 : 2)
    this.initData()
  },
  data() {
    return {
      companyYearData: {},
      companyYearTableLoading: false,
      searchForm: {
        year: null,
        type: null
      },
      rules: {
        year: [
          { required: true, message: '请选择年', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择年度', trigger: 'change' }
        ]
      },
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getFullYear() > new Date().getFullYear()
        // }
      }
    }
  },
  methods: {
    initData() {
      this.companyYearTableLoading = true
      queryCompanyYearTargetSummary(this.searchForm).then(res => {
        this.companyYearTableLoading = false
        this.companyYearData = res.data
      })
    },
    search() {
      this.$refs.searchForm.validate(flag => {
        if (flag) {
          this.initData()
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.mailTable {
  width: 100%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  height: 35px;
  line-height: 18px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

/deep/ .mailTable .header td {
  text-align: center;
  font-size: 18px !important;
  font-weight: bold;
  margin: 10px auto;
}

/deep/ .mailTable .header_two td {
  text-align: center;
  font-size: 15px !important;
  font-weight: bold;
  margin: 10px auto;
}

.icon_td {
  position: relative;
  //padding: 0 !important;
  //width: 70px !important;
}

//.icon_td:before {
//  content: "";
//  position: absolute;
//  width: 1px;
//  height: 100px; /*这里需要自己调整，根据td的宽度和高度*/
//  top: 0;
//  left: 0;
//  background-color: #E6EAEE;
//  display: block;
//  transform: rotate(-45deg); /*这里需要自己调整，根据线的位置*/
//  transform-origin: top;
//}
td {
  font-size: 12px !important;
}
</style>
